<template>
    <div class="person-card">
        <el-card>
            个人简历
            <el-divider/>
            <div class="basic">
                <basic-item title="姓名" :content="resume.name">
                    <template v-if="editable" #content>
                        <el-input v-model="resume.name"/>
                    </template>
                </basic-item>
                <basic-item title="性别" :content="resume.sex">
                    <template v-if="editable" #content>
                        <el-radio-group v-model="resume.sex">
                            <el-radio label="男">男</el-radio>
                            <el-radio label="女">女</el-radio>
                        </el-radio-group>
                    </template>
                </basic-item>
                <basic-item title="出生日期" :content="resume.birth">
                    <template v-if="editable" #content>
                        <el-date-picker
                            v-model="resume.birth"
                            type="date"
                            placeholder="出生日期"
                            :default-value="new Date(2010, 9, 1)"
                        />
                    </template>
                </basic-item>
                <basic-item title="学历" :content="this.$dictMap.getLabel(`education:${resume.highestEducation}`)">
                    <template v-if="editable" #content>
                        <el-select v-model="resume.highestEducation" filterable placeholder="选择学历">
                            <el-option :label="item.label" :value="item.value" v-for="(item) in this.$dictMap.get('education')"/>
                        </el-select>
                    </template>
                </basic-item>
                <basic-item title="学位" :content="this.$dictMap.getLabel(`academic_degree:${resume.academicDegree}`)" placeholder="选择学位">
                    <template v-if="editable" #content>
                        <el-select v-model="resume.academicDegree" filterable placeholder="选择学位">
                            <el-option :label="item.label" :value="item.value" v-for="(item) in this.$dictMap.get('academic_degree')"/>
                        </el-select>
                    </template>
                </basic-item>
                <basic-item title="身份证号码" :content="resume.idCard">
                    <template v-if="editable" #content>
                        <el-input v-model="resume.idCard"></el-input>
                    </template>
                </basic-item>
                <basic-item title="毕业院校" :content="resume.graduationInstitutions">
                    <template v-if="editable" #content>
                        <el-input v-model="resume.graduationInstitutions"/>
                    </template>
                </basic-item>
                <basic-item title="专业" :content="resume.major">
                    <template v-if="editable" #content>
                        <el-input v-model="resume.major"/>
                    </template>
                </basic-item>
                <basic-item title="民族" :content="this.$dictMap.getLabel(`nation:${resume.nation}`)">
                    <template v-if="editable" #content>
                        <el-select v-model="resume.nation" filterable placeholder="选择民族">
                            <el-option :label="item.label" :value="item.value" v-for="(item) in this.$dictMap.get('nation')"/>
                        </el-select>
                    </template>
                </basic-item>
                <basic-item title="籍贯" :content="resume.nativePlace">
                    <template v-if="editable" #content>
                        <el-input v-model="resume.nativePlace"/>
                    </template>
                </basic-item>
                <basic-item title="政治面貌" :content="this.$dictMap.getLabel(`politics:${resume.politics}`)">
                    <template v-if="editable" #content>
                        <el-select v-model="resume.politics" filterable placeholder="选择政治面貌">
                            <el-option :label="item.label" :value="item.value" v-for="(item) in this.$dictMap.get('politics')"/>
                        </el-select>
                    </template>
                </basic-item>
                <basic-item title="婚姻状况" :content="this.$dictMap.getLabel(`wedlock:${resume.wedlock}`)">
                    <template v-if="editable" #content>
                        <el-select v-model="resume.wedlock" filterable placeholder="选择婚姻状态">
                            <el-option :label="item.label" :value="item.value" v-for="(item) in this.$dictMap.get('wedlock')"/>
                        </el-select>
                    </template>
                </basic-item>
                <basic-item title="健康状况" :content="resume.health">
                    <template v-if="editable" #content>
                        <el-input v-model="resume.health"/>
                    </template>
                </basic-item>
                <basic-item title="身高" :content="resume.height?resume.height.toFixed(2):null" suffix="cm">
                    <template v-if="editable" #content>
                        <el-input-number v-model="resume.height" :precision="0" :step="1" :max="300"/> <span style="line-height: 32px;margin-left: 6px">cm</span>
                    </template>
                </basic-item>
                <basic-item title="体重" :content="resume.weight?resume.weight.toFixed(2):null" suffix="kg">
                    <template v-if="editable" #content>
                        <el-input-number v-model="resume.weight" :precision="2" :step="1" :max="200"/> <span style="line-height: 32px;margin-left: 6px">kg</span>
                    </template>
                </basic-item>
            </div>
        </el-card>
    </div>
</template>

<script>
import BasicItem from "../../../components/BasicItem.vue";
import {getEmpResume, updateEmpResume} from "../../../network/resume";
export default {
    name: "PersonalCard",
    components:{
        BasicItem
    },
    data(){
        return{
            editable: false,
            resume:{
                "id": null,
                "name": null,
                "sex": null,
                "birth": null,
                "highestEducation": null,
                "academicDegree": null,
                "idCard": null,
                "graduationInstitutions": null,
                "major": null,
                "domicilePlace": null,
                "politics": null,
                "nation": null,
                "nativePlace": null,
                "wedlock": null,
                "height": null,
                "weight": null,
                "health": null,
                "contactPhone": null,
            },
            cacheResume: null
        }
    },
    methods:{
        saveEdit(){
            updateEmpResume(this.resume).then(vo=>{
                this.$response.handle({
                    data: vo,
                    success: '修改成功',
                    error: '修改失败',
                    successFn: ()=>{
                        this.editable = false;
                    },
                    failFn: ()=>{

                    }
                })
            })
        },
        cancelEdit(){
            this.resume = this.$utils.clone(this.cacheResume);
            this.editable = false;
        },
        loadEmpResume(){
            getEmpResume().then(vo=>{
                // console.log('vo',vo)
                this.$response.handle({
                    data: vo,
                    successFn: ()=>{
                        if(vo.data){
                            this.resume = vo.data;
                            this.cacheResume = this.$utils.clone(this.resume);
                        }
                    },
                    log: '员工简历信息'
                })
            })
        },
        init(){
            this.loadEmpResume();
        }
    },
    created() {
        this.init();
    }
}
</script>

<style scoped>
.person-card{

}
.basic{
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
    /*border: 1px solid red;*/
    display: flex;
    flex-wrap: wrap;
}
.el-input{
    width: 220px;
}
.el-select-dropdown__item{
    width: 100%;
}
</style>
<style>
.el-select-dropdown__wrap {
    width: 200px;
}
</style>
